<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局(新的)</title>
    <style>
     *{
        margin:0;padding:0;
      }
      html,body{
        width: 100%;
        height: 100%;
      }
      header,footer{
        height: 50px;
        border:1px solid #ccc;
        flex:none;
      }
      .container{
        height: 100%;
        display:flex;
        display:-webkit-flex;
        /*display:-ms-flex;
        display:-moz-flex;
        display:box;*/
        flex-direction:column;
      }
      main{
        background:plum;
        flex:1;
        -webkit-box-flex:1;
        -ms-box-flex:1;
        -moz-box-flex:1;
        box-flex:1;
        overflow: auto;
      }
      p{
        height: 300px;
        background:yellow;
      }
    </style>
    
</head>
<body>

    <div class="container">
        <header>header</header>
        <main>
            <!--<p>11</p>-->
            <!--<p>11</p>-->
            <!--<p>11</p>-->
            <!--<p>11</p>-->
            <!--<p></p>-->
            <!--<p></p>-->
            <!--<p></p>-->
            <!--<p></p>-->
            <!--<p></p>-->
        </main>
        <footer>footer</footer>
    </div>
</body>
</html>